<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"
	contentType="text/html; charset=utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html>
<html>
<head>
<title>博客-帖子内容</title>

<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="Css/style.css">
<link rel="stylesheet" type="text/css" href="Css/bootstrap.css">
<script type="text/javascript" src="Js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="Js/bootstrap.js"></script>
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<link href="umeditor/themes/default/css/umeditor.css" type="text/css"
	rel="stylesheet">
<script type="text/javascript" src="umeditor/third-party/jquery.min.js"></script>
<script type="text/javascript"
	src="umeditor/third-party/template.min.js"></script>
<script type="text/javascript" charset="utf-8"
	src="umeditor/umeditor.config.js"></script>
<script type="text/javascript" charset="utf-8"
	src="umeditor/umeditor.min.js"></script>
<script type="text/javascript" src="umeditor/lang/zh-cn/zh-cn.js"></script>

</head>

<body style="background:#EEEFF1;">
	<!-- header start-->

	<div class="container-fluid " style="background:#333;height:37px;">
		<div class="row ">
			<div class="col-md-2"></div>
			<div class="col-md-8 text-right" style="padding:8px;">
				<c:choose>
					<c:when test="${sessionScope.flag.equals('ok')}">
						<span class="label label-danger">你好,${sessionScope.username}</span>|<a
							href="<c:url value='/logoutServlet'/>?value=2"
							class="label label-primary">注销</a>
					</c:when>
					<c:otherwise>
						<a href="login.jsp"><span class="label label-info">登录</span></a>
						<em>|</em>
						<a href="register.jsp"><span class="label label-info">注册</span></a>
						<em>|</em>
						<a href="find1.html"><span class="label label-info">忘记密码</span></a>
					</c:otherwise>
				</c:choose>
			</div>
			<div class="col-md-2"></div>
		</div>
	</div>

	<div class="container-fluid " style="background:#328555;height:137px;">
		<div class="row ">
			<div class="col-md-2"></div>
			<div class="col-md-8">

				<img src="image/logo.png" style="margin:30px;" />

			</div>
			<div class="col-md-2"></div>
		</div>
	</div>
	<!-- header end-->
	<!-- navigation start -->
	<div class="container-fluid " style="background:#333;height:62px;">
		<div class="row">
			<div class="col-md-2"></div>
			<div class="col-md-8">

				<ul class="nav nav-pills nav-justified" style="padding:10px;">
					<li role="presentation" class="span"><a href="index.jsp">首页</a></li>
					<li role="presentation" class="span"><a href="notification.html">咨询</a></li>
					<li role="presentation" class="span"><a
						href="<c:url value='blogServlet'/>">论坛</a></li>
					<li role="presentation" class="span"><a href="#">广播</a></li>
					<li role="presentation" class="span"><a href="#">分组</a></li>
					<li role="presentation" class="span"><a
						href="<c:url value='/userInfoServlet'/>">个人中心</a></li>
				</ul>

			</div>
			<div class="col-md-2"></div>
		</div>
	</div>
	<!-- navigation ending -->
	<div class="container" style="background:white;">
		<div class="row " style="height:37px;">
			<div class="col-md-8" style="margin:10px;">
				<a class="glyphicon glyphicon-home span" href=""></a> <em>></em> <a
					href="<c:url value='blogServlet'/>" class="span">论坛</a> <em>></em>
				<span class="span">论坛分区一</span> <em>></em> <span class="span">美食天下</span>
				<em>></em> <span class="span">${request.Scope.value.title }</span>
			</div>
		</div>

		<div class="row" style="height:5px;background:#EEEFF1;">
			<div class="col-md-8"></div>
		</div>

		<div class="row">
			<div class="col-md-12" style="padding:0px;">
				<table class="table table table-bordered" style="margin:0px;">

					<c:forEach var="post" items="${posts}">
						<tr>
							<td style=" width:150px; height:40px;"><span class="span">查看:${post.key.pageView }</span><em>
									| </em><span class="span">回复:${fn:length(replys)}</span></td>
							<td><span style="color:red;">${post.key.title }</span></td>
						</tr>
						<!-- 帖子正文 -->
						<tr>
							<td class="warning"><span>${post.key.poster }</span> <br />
								<br /> <!-- Small modal --> <c:choose>
									<c:when test="${empty post.value.headPortrait}">
										<img style="height:100px;width:100px;" src="image/banner.jpg"
											data-toggle="modal" data-target=".bs-example-modal-sm" />
									</c:when>
									<c:otherwise>
										<img style="height:100px;width:100px;"
											src="${post.value.headPortrait }" data-toggle="modal"
											data-target=".bs-example-modal-sm" />
									</c:otherwise>
								</c:choose>
								<div class="modal fade bs-example-modal-sm" tabindex="-1"
									role="dialog" aria-labelledby="mySmallModalLabel">
									<div class="modal-dialog modal-sm" role="document">
										<div class="modal-content">
											<div class="modal-header bg-warning">
												<button type="button" class="close" data-dismiss="modal"
													aria-label="Close">
													<span aria-hidden="true">&times;</span>
												</button>
												<h5 class="modal-title text-center">基本资料</h5>
											</div>
											<div class="modal-body">
												<table class="table">

													<tr>
														<td>已发帖子:</td>
														<td>20条</td>
													</tr>
													<tr>
														<td>积分:</td>
														<td>${post.value.score }</td>
													</tr>
													<tr>
														<td>等级:</td>
														<td>${post.value.touxian }</td>
													</tr>
													<tr>
														<td>用户邮箱:</td>
														<td>715***225@qq.com</td>
													</tr>


												</table>
											</div>

										</div>
										<!-- /.modal-content -->
									</div>
								</div> <!--small modal ending  --> <br /> <br /> <span>头衔:</span> <span
								class=" btn-danger">${post.value.touxian }</span> <br /> <span>粉丝:</span>0<em>
									| </em><span>积分:</span>${post.value.score } <br /> <br /> <a
								href="" class=" btn btn-default  btn-xs glyphicon-plus"><span
									class="span">关注TA</span></a> <a
								href="http://wpa.qq.com/msgrd?v=3&uin=1963094290&site=qq&menu=yes"
								class="btn btn-default  btn-xs  glyphicon-envelope"><span
									class="span">私信</span></a></td>
							<td>

								<p class="text-right">
									<span style="color:red;font-size:20px;">楼主</span>${post.key.time }<a
										class="
                                glyphicon  glyphicon-send"
										onclick="setFocus('${post.key.poster}')"></a>
								</p> ${post.key.content } <c:set value="${post.key.postId }"
									var="reply_postid" />
							</td>
						</tr>

					</c:forEach>

					<c:forEach var="reply" items="${replys}" varStatus="status">
						<tr>
							<td class="warning"><span>${reply.value.reply_user }</span>
								<br /> <br /> <!-- Small modal --> <c:choose>
									<c:when test="${empty post.value.headPortrait}">
										<img style="height:100px;width:100px;" src="image/banner.jpg"
											data-toggle="modal" data-target=".bs-example-modal-sm" />
									</c:when>
									<c:otherwise>
										<img style="height:100px;width:100px;"
											src="${post.value.headPortrait }" data-toggle="modal"
											data-target=".bs-example-modal-sm" />
									</c:otherwise>
								</c:choose>

								<div class="modal fade bs-example-modal-sm" tabindex="-1"
									role="dialog" aria-labelledby="mySmallModalLabel">
									<div class="modal-dialog modal-sm" role="document">
										<div class="modal-content">
											<div class="modal-header bg-warning">
												<button type="button" class="close" data-dismiss="modal"
													aria-label="Close">
													<span aria-hidden="true">&times;</span>
												</button>
												<h5 class="modal-title text-center">基本资料</h5>
											</div>
											<div class="modal-body">
												<table class="table">

													<tr>
														<td>已发帖子:</td>
														<td>20条</td>
													</tr>
													<tr>
														<td>积分:</td>
														<td>${reply.key.score }</td>
													</tr>
													<tr>
														<td>等级:</td>
														<td>${reply.key.touxian }</td>
													</tr>
													<tr>
														<td>用户邮箱:</td>
														<td>715***225@qq.com</td>
													</tr>


												</table>
											</div>

										</div>
										<!-- /.modal-content -->
									</div>
								</div> <!--small modal ending  --> <br /> <br /> <span>头衔:</span> <span
								class=" btn-danger">${reply.key.touxian }</span> <br /> <span>粉丝:</span>0<em>
									| </em><span>积分:</span>${reply.key.score } <br /> <br /> <a
								href="" class=" btn btn-default  btn-xs glyphicon-plus"><span
									class="span">关注TA</span></a> <a target="_blank"
								href="http://wpa.qq.com/msgrd?v=3&uin=1963094290&site=qq&menu=yes"
								class="btn btn-default  btn-xs  glyphicon-envelope"><span
									class="span">私信</span></a></td>
							<td>
								<p class="text-right">
									<span style="color:red;font-size:20px;">${status.count }#</span>${reply.value.reply_time }<a
										class="
                                glyphicon  glyphicon-send"
										id="" onclick="setFocus('${reply.value.reply_user }')"></a>
								</p>
								<p class="lead" style="text-indent: 2em;">${reply.value.reply_content }</p>
							</td>
						</tr>

					</c:forEach>
				</table>
			</div>
		</div>

		<div class="row" style="height:2px;background:#EEEFF1;">
			<div class="col-md-8"></div>
		</div>

		<div class="row " style="height:37px;">
			<div class="col-md-10" style="margin:10px;">
				<span>发表评论</span>
			</div>
		</div>

		<div class="row" style="height:3px;background:#EEEFF1;">
			<div class="col-md-8"></div>
		</div>


		<!-- 富编辑器 -->
		<div class="row">
			<div class="col-md-12">
				<br />
				<form
					action="<c:url value='/replyPostServlet?reply_postid=${reply_postid }'/>"
					method="post" class="form-inline">

					<!--style给定宽度可以影响编辑器的最终宽度-->
					<script type="text/plain" id="myEditor"
						style="width:1000px;height:200px;">
                    
                 </script>

					<br /> <input type="submit" value="提交评论" class="btn btn-success" />
				</form>
				<br />
			</div>

		</div>
		<!-- 富编辑器 结束-->
		<div class="row" style="height:5px;background:#EEEFF1;">
			<div class="col-md-8"></div>
		</div>
	</div>

	<!-- header -->
	<div class="container-fluid " style="background:#333;height:80px;">
		<div class="row">
			<div class="col-md-2"></div>
			<div class="col-md-8"></div>
			<div class="col-md-2"></div>
		</div>
	</div>
	<!-- header ending -->
</body>
<script type="text/javascript">
//实例化编辑器

	var um = UM.getEditor('myEditor');
	//给富编译器设置焦点

	function setFocus(str) {
		UM.getEditor('myEditor').focus();
		setContent(str);

	}
	function setContent(str) {
		UM.getEditor('myEditor').setContent("@" + str + ":");

	}
</script>
</html>
